<Step title="Use SDK Components">

    Your application will interact with above authentication routes using SDK components. Replace the boilerplate `app/page.tsx` with the following:

    `/app/page.jsx`

    ```jsx
    import {
    SignOutButton,
    SignUpForm,
    SignedIn,
    SignedOut,
    TenantSelector,
    UserInfo,
    } from "@niledatabase/react";
    import "@niledatabase/react/styles.css";

    export default function SignUpPage() {
    return (
        <div className="flex flex-col items-center justify-center min-h-screen">
        <SignedIn className="flex flex-col gap-4">
            <UserInfo />
            <TenantSelector className="py-6 mb-10" />
            <SignOutButton />
        </SignedIn>
        <SignedOut>
            <SignUpForm createTenant />
        </SignedOut>
        </div>
    );
    }

    ```

</Step>
<Step title="Run and Log in to your application">

    ```bash
    npm run dev
    ```

    Navigate to localhost to see the page. You should see a signup form that looks like this:

    <img height="500" width="500" src="/images/auth/quickstart_signup.png" alt="Signup Form" />

    Enter a dummy email and password into the SignUpForm.

    If all went well, you will be logged in automatically and see the user profile and an organization switcher that allows you to create new organizations and switch between them:

    <img height="500" width="500" src="/images/auth/quickstart_authenticated.png" alt="User profile and organization switcher" />

</Step>
